<template>
  <div>
    <!-- 导航条区域 -->
    <div class="nav_content">
      <!-- fixed-top：将导航条固定top-->
      <nav class="navbar fixed-top navbar-expand-lg navbar-light nav_box">
        <a class="navbar-brand title_box" href="#/home"><i class="el-icon-s-opportunity"></i> 校园村 —— 校园互助平台 </a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- style="background-color: #fff;" -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#/home"
                ><i class="el-icon-s-home"></i> 首页
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#/order/classify/-1"
                ><i class="el-icon-menu"></i> 分类</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#/order/add"
                ><i class="el-icon-s-order"></i> 发布新订单</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#/user/total"
                ><i class="el-icon-user-solid"></i> 订单总计</a
              >
            </li>
          </ul>

          <el-dropdown>
            <el-avatar :size="50">
              <img :src=this.avatar alt=""/>
              <el-button></el-button>
            </el-avatar>
            <!-- 登陆了显示 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <a href="#/user/release" style="text-decoration: none">
                  <i class="el-icon-edit-outline"></i> 我的发布
                </a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="#/user/receive" style="text-decoration: none">
                  <i class="el-icon-edit-outline"></i> 我的接单
                </a>
              </el-dropdown-item>
              <el-dropdown-item>
                <!--<a href="http://malloc.press:9000/user/nav/toLogin" style="text-decoration: none" @click="back()">-->
                <a href="#" style="text-decoration: none" @click="back()">
                  <i class="el-icon-lock"></i> 退出
                </a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </nav>

    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {

  data () {
    return {
      // 用户头像
      avatar: "",
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      // 是否隐藏导航条
      tabNav: true,
      // 用于判断向上滚
      scrollUp: 0,
      // 文章标题名
      articleTitle: ''
    }
  },
  computed: {
    ...mapState(
      {
        userInfo: state => state.user.userInfo,
        backUrl: state => state.user.backUrl
      }
    )
  },
  methods: {
    // 鼠标滚动监听,下滑超过80隐藏
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var scroll = scrollTop - this.scrollUp
      this.scrollUp = scrollTop
      if (scroll > 0) {
        this.tabNav = false
        // console.log('向下滚')
      } else {
        this.tabNav = true
        // console.log('向上滚')
      }
      // // console.log(scrollTop)
      // if (scrollTop > 80) {
      //   // console.log('隐藏')
      //   this.tabNav = false
      // } else if (scrollTop < 80) {
      //   this.tabNav = true
      // }
    },
    // 退出登陆
    async back () {
      window.localStorage.clear()
      await this.$http.get('/user/nav/toLogin')
    },
    clearArticleTitle (title) {
      if (title === '') {
        this.$store.commit('clearArticleTitle')
      }
    },

  },
  mounted () {
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
  },
  created () {
    var that = this
    that.$http.get('/user/status',{
      emulateJSON:true
    }).then(res => {
      if (res.data.data.success !== undefined) {
        window.location.href = "http://malloc.press:9000/user/nav/toLogin"
      }
      localStorage.setItem("nickname", res.data.data.userInfo.nickname)
      localStorage.setItem("avatar", res.data.data.userInfo.avatar)
      localStorage.setItem("userId", res.data.data.userInfo.id)
      localStorage.setItem("phone", res.data.data.userInfo.phone)
      localStorage.setItem("qq", res.data.data.userInfo.qq)
      that.avatar = localStorage.getItem("avatar")
    });
  }

}
</script>

<style lang="less" scoped>
.nav_content {
  z-index: 9;
  .nav_box {
    background-color: #fff;
    // background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 1%;
    padding: 0 10%;
    transition: all 0.8s;
    opacity: 0.9 !important;

    .title_box {
      color: rgb(112, 240, 144);
    }

    ul {
      li {
        margin: 0 1rem;
        a {
          transition: all 0.9s;
        }
        a:hover {
          color: #409eff;
        }
      }
    }

    // 代码写的不错，可以对头像展示重复使用了
    .el-avatar {
      // border: 1px solid rgb(243, 219, 190);
      background-color: rgb(252, 251, 249);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 8px;
      position: relative;
      img {
        border-radius: 50%;
        width: 90%;
        height: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
  @media screen and (max-width: 1000px) {
    .nav_box {
      padding: 0;
    }
  }
  .yes {
    height: 57px;
  }
  .no {
    height: 0;
    padding: 0 !important;
    margin: 0 !important;
    * {
      display: none;
    }
  }
}
.head_content {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 1000px) {
  .head_content {
    // margin-top: 10%;
  }
}
.m-content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.maction {
  margin: 0 15px;
}

.passwordFormClass {
  padding-right: 20px;
}
</style>
